import React from 'react';
import { DeviceEventEmitter, Image, Linking, NativeModules, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View, Modal, TouchableWithoutFeedback } from 'react-native';

import PushUtil from "../Umeng/PushUtil"
import ScreenUtils from '../Utils/ScreenUtils'
import ColorUtils from '../Utils/ColorUtils'
import ToastUtils from '../Utils/ToastUtils'
import StorageUtils from '../Utils/StorageUtils'
import UserChangePassword from "../UserChangePassword/UserChangePassword";
import HttpUtils from "../Utils/HttpUtils";
import Constant from "../Constant/Constant";

export default class NavigatorUser extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            realName: '',
            deptName: '',
            avatar: '',
            exitModal: false,
        }
    }

    componentDidMount()
    {
        DeviceEventEmitter.addListener('userReload', (events) => this.userReload());
        this.renderAppVersion();
        this.userReload()
    }

    renderAppVersion()
    {
        if (Platform.OS == 'ios')
        {
            this.setState({
                version: '1.0.1',
            });
        } else
        {
            NativeModules.DeviceNativeModule.getAppVersion((version) =>
            {
                this.setState({
                    version: version,
                });
            });
        }
    }

    userReload()
    {
        var that = this;
        StorageUtils.get('session').then((session) =>
        {
            if (session != '' && session != null)
            {
                HttpUtils.getJson(Constant.getUserInfo, session, function (resultcode, data)
                {
                    that.setState({
                        realName: data.realName,
                        deptName: data.deptName,
                        avatar: data.avatar
                    })
                }, function (resultcode, reason)
                {
                    ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                });
            }
        });
    }

    jumpUserHelp()
    {
        this.props.navigation.navigate('UserHelp');
    }

    jumpUserDetail()
    {
        this.props.navigation.navigate('UserDetail');
    }

    jumpChangePassword()
    {
        this.props.navigation.navigate('UserChangePassword');
    }

    jumpUserCase()
    {
        this.props.navigation.navigate('UserCaseChart');
    }

    showExit()
    {
        this.setState({
            exitModal: true
        })
    }

    exit()
    {
        StorageUtils.save('session', '');
        ToastUtils.toastShortBottom('退出登录成功');
        this.props.navigation.navigate('UserLogin');
        this.setState({
            exitModal: false
        })
    }

    render()
    {
        return (
            <View style={styles.container}>
                {/*个人中心头部*/}
                <TouchableOpacity activeOpacity={0.95} onPress={() => this.jumpUserDetail()} style={{width: ScreenUtils.width, height: 200, backgroundColor: ColorUtils.blue, flexDirection: 'column', justifyContent: 'center', alignItems: 'center',}}>
                    <Image source={require('../img/logo.png')} style={{borderRadius: 35, marginTop: 16, width: 70, height: 70}}/>
                    <Text style={{marginTop: 8, fontSize: ScreenUtils.Font_16, color: ColorUtils.white, backgroundColor: ColorUtils.transparent}}>{this.state.realName}</Text>
                    <Text style={{marginTop: 4, fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray, backgroundColor: ColorUtils.transparent}}>{this.state.deptName}</Text>
                </TouchableOpacity>

                <View style={styles.iconItemLineView}>
                    <TouchableOpacity activeOpacity={0.5} onPress={() => this.jumpUserDetail()}>
                        <View style={styles.iconLine}>
                            <Image resizeMode={Image.resizeMode.stretch} style={{width: 20, height: 18}} source={require('../img/user_item_1.png')}/>
                            <Text style={styles.iconText}>账户信息</Text>
                            <Image style={styles.iconRight} source={require('../img/arrowright.png')}/>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.5} onPress={() => this.jumpChangePassword()}>
                        <View style={styles.iconLine}>
                            <Image resizeMode={Image.resizeMode.stretch} style={styles.iconLeft} source={require('../img/user_item_2.png')}/>
                            <Text style={styles.iconText}>修改密码</Text>
                            <Image style={styles.iconRight} source={require('../img/arrowright.png')}/>
                        </View>
                    </TouchableOpacity>
                    {/*<TouchableOpacity activeOpacity={0.5} onPress={() => this.jumpUserCase()}>*/}
                    {/*<View style={styles.iconLine}>*/}
                    {/*<Image resizeMode={Image.resizeMode.stretch} style={styles.iconLeft} source={require('../img/user_item_3.png')}/>*/}
                    {/*<Text style={styles.iconText}>我的案件</Text>*/}
                    {/*<Image style={styles.iconRight} source={require('../img/arrowright.png')}/>*/}
                    {/*</View>*/}
                    {/*</TouchableOpacity>*/}
                    {/*<TouchableOpacity activeOpacity={0.5} onPress={() => this.jumpUserHelp()}>*/}
                    {/*<View style={styles.iconLine}>*/}
                    {/*<Image resizeMode={Image.resizeMode.stretch} style={styles.iconLeft} source={require('../img/user_item_4.png')}/>*/}
                    {/*<Text style={styles.iconText}>使用帮助</Text>*/}
                    {/*<Image style={styles.iconRight} source={require('../img/arrowright.png')}/>*/}
                    {/*</View>*/}
                    {/*</TouchableOpacity>*/}
                    <TouchableOpacity activeOpacity={0.5} onPress={() => this.showExit()}>
                        <View style={styles.iconLine}>
                            <Image resizeMode={Image.resizeMode.stretch} style={styles.iconLeft} source={require('../img/user_item_5.png')}/>
                            <Text style={styles.iconText}>退出登录</Text>
                            <Image style={styles.iconRight} source={require('../img/arrowright.png')}/>
                        </View>
                    </TouchableOpacity>
                </View>
                <Modal style={styles.container}
                       transparent={true}
                       visible={this.state.exitModal}
                       onRequestClose={() =>
                       {
                           this.setState({exitModal: false});
                       }}>
                    <TouchableWithoutFeedback style={{flex: 1,}} onPress={() =>
                    {
                        this.setState({exitModal: false})
                    }}>
                        <View style={styles.dialogContainer}>
                            <View style={styles.innerContainer}>
                                <View style={styles.contentContainer}>
                                    <Text style={styles.dialogContentTextStyle}>退出登录后您将无法接收消息</Text>
                                    <Text style={styles.dialogContentTextStyle}>确认要退出吗？</Text>
                                </View>
                                <View style={{
                                    flex: 1,
                                    width: 270,
                                    flexDirection: 'column',
                                    position: "absolute",
                                    bottom: 0,
                                    alignItems: 'center',
                                }}>
                                    <TouchableOpacity style={{
                                        justifyContent: 'center', alignItems: 'center', width: '100%', height: 44,
                                    }} onPress={() =>
                                    {
                                        this.exit()
                                    }}>
                                        <Text style={{marginTop: 5, textAlign: 'center', fontSize: 16, marginBottom: 10, color: ColorUtils.red}}>确定</Text>

                                    </TouchableOpacity>

                                    <View style={{height: 1, width: 250, backgroundColor: ColorUtils.line}}/>

                                    <TouchableOpacity style={{
                                        justifyContent: 'center', width: '100%', alignItems: 'center', height: 44,
                                    }} onPress={() =>
                                    {
                                        this.setState({exitModal: false})
                                    }}>
                                        <Text style={{marginTop: 5, textAlign: 'center', fontSize: 16, marginBottom: 10, color: ColorUtils.light_gray}}>取消</Text>
                                    </TouchableOpacity>

                                </View>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                </Modal>

            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ColorUtils.bgColor,
    },
    iconItemLineView: {
        marginTop: 10,
        flexDirection: 'column',
        borderTopWidth: 1,
        borderTopColor: '#e4e4e4'
    },
    iconLine: {
        height: 50,
        paddingRight: 8,
        paddingTop: 8,
        paddingBottom: 8,
        paddingLeft: 12,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#E5E5E5'
    },
    iconLeft: {
        width: 20,
        height: 20
    },
    iconText: {
        flex: 1,
        marginLeft: 12,
        fontSize: ScreenUtils.Font_14,
        color: ColorUtils.black
    },
    iconRight: {
        width: 9,
        height: 16
    },
    dialogContainer: {
        height: ScreenUtils.height,
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: 'red',
    },

    innerContainer: {
        borderRadius: 12,
        alignItems: 'center',
        backgroundColor: '#fff',
        width: 270,
        height: 200,
        borderWidth: 1,
        borderColor: '#E5E5E5'
    },
    contentContainer: {
        flex: 1,
        width: 270,
        height: 75,
        flexDirection: 'column',
        position: "absolute",
        top: 0,
        borderTopColor: '#cccccc',
        justifyContent: 'center',
        alignItems: 'center'
    },
    dialogContentTextStyle: {
        fontSize: 16,
        color: '#333333',
        marginLeft: 25,
        marginRight: 25,
        marginTop: 10
    },

    dialogInnerTextStyle: {
        fontSize: 14,
        color: ColorUtils.red,
        marginTop: 5,
        marginLeft: 25,
        marginRight: 25
    },
});



